<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <link href="css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #b3d6ff;
        }
        a, #animation {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        #resText{
            border:#666 1px solid;
        }
        #animation{
            border: #004b11 2px solid;
            background: green;
            width: 200px;
            height: 200px;
            margin-left: 40%;
        }
        #loading{
            position: fixed;
            left: 50%;
            top: 50%;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>jQuery与ajax的应用</h1>
    <hr>
    <br>
    <h3>Ajax的getScript()方法</h3>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3">
            <button class="btn btn-success" id="send">ajax获取评论和评委</button>
            <br><br>
            <h4><b>已有评论：</b></h4>
            <div id="resText"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <br><br>
            <h4><b>已有评委：</b></h4>
            <div id="resText2"></div>
        </div>
    </div>
    <h3>Ajax的getScript()方法——加载jquery.color.js</h3>
    点击试试？
    <br>
    <div id="animation"></div>
    <h3>Ajax的getJson()方法</h3>
    <button class="btn btn-success" id="send2">ajax获取json评论</button>
    <br><br>
    <h4>获取Json的值</h4>
    <div id="resText3"></div>
    <br>
    <h3>由于getJson()的另一个例子中的网址打不开，故略去</h3>
    <br>
    <h3>用$.ajax()代替getJson()</h3>
    <button class="btn btn-success" id="send3">$.ajax获取json评论</button>
    <br><br>
    <h4>获取Json的值</h4>
    <div id="resText4"></div>
    <br>
    <br>
    <div id="loading" class= "table-bordered btn-warning img-thumbnail" style="display: none" >加载中。。。</div>
    <div style="height: 500px"></div>
</div>
<script>
    $(function(){
        $(document).ajaxStart(function(){
            $("#loading").show();
        }).ajaxStop(function(){
            $("#loading").hide();
        });
        $("#send").click(function(){
            alert("加载文件：js/testFor06.js")
            $.getScript("js/testFor06.js");
        });
        $.getScript("js/jquery.color.js",function(){
            $("#animation").click(function(){
                $(this).animate({backgroundColor:"pink"},1000)
                    .animate({
                        height: 100,
                        backgroundColor:"blue"
                	},1000);
            })
        });
        $("#send2").click(function(){
            $.getJSON('testFor06.json', function(data){
                //在JSON文件里不能像JS一样加入注释，否则可能不会正常执行！！！
                var html = "";
                //这里的data这么写，决定了json文件的内容就是一个数组，也就是最外层是个中括号而不是大括号！！！
                $.each(data,function(index, quotations){
                	alert(index + "-" + quotations);
                     html += '<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">'
                     +quotations['name']
                     +'</h3></div><div class="panel-body">'
                     +quotations['content']+'</div></div>'
                 });
                $("#resText3").html(html);
            });
        });
        $("#send3").click(function(){
            $.ajax({
                type:   "GET",
                url:    "testFor06.json",
                dataType:"json",
                global:true,
                success: function(data) {
                    //在JSON文件里不能像JS一样加入注释，否则可能不会正常执行！！！
                    var html = "";
                    //这里的data这么写，决定了json文件的内容就是一个数组，也就是最外层是个中括号而不是大括号！！！
                    $.each(data, function (index, quotations) {
                        alert(index + "-" + quotations);
                        html += '<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">'
                                + quotations['name']
                                + '</h3></div><div class="panel-body">'
                                + quotations['content'] + '</div></div>'
                    });

                $("#resText4").html(html);
                }
            });
        });
    })






</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>